<template>
  <view class="card-container">
    <view class="card-data">
      <!-- title -->
      <view class="data-area">
        <view class="title">{{ data.eventsName }}</view>
        <view class="act-name"> {{ eventsStartTime }} 到 {{ eventsEndTime }} </view>
      </view>
      <view class="arrow-area"
        ><image class="right-arrow" src="https://img.qumoyugo.com/webimgbg/arror2.png" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})
// 活动开始时间
const eventsStartTime = computed(() => {
  if (!props.data.eventsStartTime) return ''
  return props.data.eventsStartTime.split(' ')[0]
})
// 活动结束时间
const eventsEndTime = computed(() => {
  if (!props.data.eventsEndTime) return ''
  return props.data.eventsEndTime.split(' ')[0]
})
</script>

<style lang="scss">
.card-container {
  margin-top: 20rpx;
  margin-left: 28rpx;
  margin-right: 28rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 3rpx 0rpx #e5e5e5;
  border-radius: 18rpx;
}
.title {
  padding-top: 38rpx;
  margin-left: 27rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.act-name {
  margin-left: 27rpx;
  margin-top: 31rpx;
  font-size: 29rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  padding-bottom: 15px;
}
.card-data {
  display: flex;
  justify-content: space-between;
}
.data-area {
  margin-right: 127rpx;
}
.arrow-area {
  display: flex;
  align-items: center;
  justify-content: center;
}
.right-arrow {
  width: 29rpx;
  height: 20rpx;
  margin-right: 27rpx;
}
</style>
